<template>
	<view class="direct-pay-order flex-column">
		<scroll-view scroll-y="true" class="scroll-view" :show-scrollbar="false" @scrolltolower="getData" refresher-enabled @refresherrefresh="pullDownRefresh"
			:refresher-triggered="isRefresh">
			<view class="content-column flex-column">
				<view class="shadow-radius-item column-item" v-for="(item, index) in dataList" :key="index" @click="seeDetail(item.order_number)">
					<view class="content-title flex-spb-cn border-bottom">
						<view class="store-info flex-cn">
							<image class="store-img" :src="item.shopimg_url"></image>
							<text class="store-name text-ellipsis">{{item.store_name}}</text>
						</view>
						<text class="primary-color">{{item.order_type == 1 ? '已完成' : '已退款'}}</text>
					</view>
					<view class="list flex-spb-cn">
						<text class="list-title">订单编号</text>
						<view class="list-info">{{item.order_number}}</view>
					</view>
					<view class="list flex-spb-cn">
						<text class="list-title">交易时间</text>
						<text class="list-info">{{item.payment_time}}</text>
					</view>
					<view class="list flex-spb-cn">
						<text class="list-title">实付金额</text>
						<text class="list-info">￥{{item.actual_payment_amount}}</text>
					</view>
					<view class="list flex-spb">
						<text class="list-title">支付方式</text>
						<view class="list-info flex-cn">
							<text class="qh-rt-single payment-type-icon" :class="[getPayTypeIcon(item.payment_method)]"></text>
							<text>{{paymentMethod(item.payment_method)}}</text>
						</view>
					</view>
				</view>
				<view class="loading">
					<qh-loading v-if="isLoading" row size="small" text="加载中"></qh-loading>
					<qh-loaded-tip v-else-if="!isLoading && !canLoad" :text="!dataList.length?'暂无订单数据':'没有更多了'"></qh-loaded-tip>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "direct-pay-order",
		data() {
			return {
				page: 1,
				limit: 10,
				dataList: [],
				canLoad: true,
				isLoading: false,
				isRefresh: false,
			};
		},
		async created() {
			await this.$onLaunched;
			this.getData();
		},
		methods: {
			seeDetail(order_number) {
				uni.navigateTo({
					url: '/pages/order/directPay/orderDetail?order_number=' + order_number
				})
			},
			paymentMethod(type) {
				let str = '';
				switch (type) {
					case '1':
						str = '微信支付';
						break;
					case '2':
						str = '余额支付';
						break;
					case '3':
						str = '组合支付';
						break;
					case '4':
						str = '支付宝支付';
						break;
				}
				return str;
			},
			getPayTypeIcon(type) {
				let icon = '';
				let color = '';
				switch (type) {
					case '4':
						icon = 'qh-rt-a-lujing1531';
						color = 'alipay-icon';
						break;
					case '1':
						icon = 'qh-rt-a-zu4332';
						color = 'wechat-pay-icon';
						break;
					case '2':
						icon = 'qh-rt-a-zu4331';
						color = 'balance-pay-icon';
						break;
					case '3':
						icon = 'qh-rt-a-zu4334';
						color = 'group-pay-icon';
						break;
				}
				return icon + ' ' + color;
			},
			// 获取数据列表
			async getData() {
				if (this.isLoading || !this.canLoad) return;
				this.isLoading = true
				const {
					status,
					data,
					message,
				} = await this.$request('/AggregationCode/User/getStoreAggregationOrderList', {
					page: this.page,
					limit: this.limit,
				})
				this.isLoading = false;
				if (status == 1) {
					if (this.page == 1) {
						this.dataList = data.list
					} else {
						this.dataList = [...this.dataList, ...data.list]
					}
					if (data.list.length < this.limit) {
						this.canLoad = false
					} else {
						this.canLoad = true
						this.page++
					}

					if (this.isRefresh) {
						this.isRefresh = false
						uni.showToast({
							title: '刷新成功',
							icon: 'success'
						})
					}
				} else {
					if (this.isRefresh) {
						this.isRefresh = false
						uni.showToast({
							title: '刷新失败',
							icon: 'error'
						})
					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				}
			},
			// 下拉刷新
			pullDownRefresh() {
				this.isRefresh = true;
				this.refreshData();
			},
			//刷新数据
			refreshData() {
				this.page = 1;
				this.canLoad = true;
				this.getData();
			},
		},
	}
</script>

<style lang="scss">
	.direct-pay-order {
		width: 100%;
		height: 100%;

		.scroll-view {
			width: 100%;
			height: 100%;
			overflow-y: auto;

			.shadow-radius-item {
				padding: 0;
				margin-bottom: 0;
			}

			.column-item {
				padding-bottom: 14rpx;
			}

			.content-title {
				height: 112rpx;
				color: #333333;
				font-size: 32rpx;
				line-height: 36rpx;
				padding: 0 20rpx;

				.store-info {
					flex: 1;
					margin-right: 20rpx;

					.store-img {
						width: 72rpx;
						height: 72rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.store-name {
						flex: 1;
					}
				}

				.primary-color {
					font-size: 28rpx;
				}
			}

			.list {
				padding: 12rpx 20rpx;

				.list-title {
					color: #999999;
					font-size: 28rpx;
					line-height: 36rpx;
				}

				.list-info {
					color: #333333;
					font-size: 28rpx;
					line-height: 36rpx;
				}

				.text-wrap {
					word-wrap: break-word;
					white-space: pre-wrap;
				}

				.primary-color {
					margin-left: 20rpx;
				}

				&:nth-last-child(1) {
					padding-bottom: 16rpx;
				}
			}

			.payment-type-icon {
				font-size: 32rpx;
				margin-right: 12rpx;
			}

			.balance-pay-icon {
				color: #FF870E;
			}

			.wechat-pay-icon {
				color: #09BB07;
			}

			.alipay-icon {
				color: #3874F6;
			}

			.group-pay-icon {
				color: #2194FF;
			}
		}
	}
</style>
